<template>
  <div class="portalWebsiteMian">
    <div class="portalWebsiteBox">
      <div class="modelInfoBox">
        <!--推荐模型-->
        <Recommend/>
        <!--模型列表-->
        <ModelList/>
      </div>
      <!--栏目-->
      <div class="columnInfoContainer">
        <div class="columnInfoBox" v-for="(item, index) in columnData" :key="index">
          <Column :data="item"/>
        </div>
      </div>
      <div class="dataListBox">
        <div class="dataListItem">
          <!--注册数据-->
          <RegisterData/>
        </div>
        <div class="dataListItem">
          <!--数据交换-->
          <DataExchange/>
        </div>
      </div>
    </div>
<!--    <div class="applicationListBox">-->
<!--      &lt;!&ndash;应用列表&ndash;&gt;-->
<!--      <Application/>-->
<!--    </div>-->
  </div>
</template>
<script>
import ModelList from './model/Model/List'
import Recommend from './model/Model/Recommend';
import Application from './model/Application/List';
import Column from './model/Column/List'
import RegisterData from "./RegisterData/List";
import DataExchange from "./DataExchange/List";
import {listAllColumn} from '@/api/model/column';

export default {
  name: '',
  props: {},
  components: {
    ModelList,
    Recommend,
    Application,
    Column,
    RegisterData,
    DataExchange
  },
  data() {
    return {
      columnData: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getListAllColumn();
  },
  mounted() {
  },
  methods: {
    async getListAllColumn() {
      const {code, data} = await listAllColumn();
      if (code === 200) {
        this.columnData = [...data];
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.portalWebsiteBox {
  .modelInfoBox {
    padding: 0 15px 20px;
    background: #fff;
    margin-bottom: 15px;
    border-radius: 8px;
  }


  .dataListBox {
    margin: 15px 0;
    padding: 0 15px 20px;
    background: #fff;
    overflow: hidden;
    border-radius: 8px;

    .dataListItem {
      padding: 0 15px;
      width: 50%;
      float: left;
      box-sizing: border-box;
    }
  }
}

.columnInfoContainer {
  overflow: hidden;
  background: #fff;
  border-radius: 8px;

  .columnInfoBox {
    width: 50%;
    float: left;
  }
}
.applicationListBox{
  margin-top: 15px;
}
</style>
